<template>
  <div class="foods-container">
    <div class="header">
      <h1>菜品管理</h1>
      <button @click="showAddDialog = true" class="btn btn-primary">
        <i class="material-icons">add</i>
        添加菜品
      </button>
    </div>
    
    <div class="content">
      <div class="foods-table">
        <table>
          <thead>
            <tr>
              <th>菜品名称</th>
              <th>价格</th>
              <th>描述</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="food in foods" :key="food.foodId">
              <td>{{ food.foodName }}</td>
              <td>¥{{ food.foodPrice }}</td>
              <td>{{ food.foodExplain }}</td>
              <td>
                <span :class="['status', food.foodStatus === 1 ? 'active' : 'inactive']">
                  {{ food.foodStatus === 1 ? '上架' : '下架' }}
                </span>
              </td>
              <td class="actions">
                <button @click="editFood(food)" class="action-btn edit">编辑</button>
                <button @click="toggleStatus(food)" class="action-btn toggle">
                  {{ food.foodStatus === 1 ? '下架' : '上架' }}
                </button>
                <button @click="deleteFood(food)" class="action-btn delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加菜品对话框 -->
    <div v-if="showAddDialog" class="dialog-overlay" @click="showAddDialog = false">
      <div class="dialog" @click.stop>
        <h3>添加菜品</h3>
        <div class="form-group">
          <label>菜品名称</label>
          <input v-model="addForm.foodName" type="text" placeholder="请输入菜品名称" class="form-input">
        </div>
        <div class="form-group">
          <label>菜品价格</label>
          <input v-model="addForm.foodPrice" type="number" step="0.01" placeholder="请输入价格" class="form-input">
        </div>
        <div class="form-group">
          <label>菜品描述</label>
          <textarea v-model="addForm.foodExplain" placeholder="请输入菜品描述" class="form-input"></textarea>
        </div>
        <div class="dialog-actions">
          <button @click="showAddDialog = false" class="cancel-btn">取消</button>
          <button @click="addFood" class="confirm-btn">确认添加</button>
        </div>
      </div>
    </div>

    <!-- 编辑菜品对话框 -->
    <div v-if="showEditDialog" class="dialog-overlay" @click="showEditDialog = false">
      <div class="dialog" @click.stop>
        <h3>编辑菜品</h3>
        <div class="form-group">
          <label>菜品名称</label>
          <input v-model="editForm.foodName" type="text" placeholder="请输入菜品名称" class="form-input">
        </div>
        <div class="form-group">
          <label>菜品价格</label>
          <input v-model="editForm.foodPrice" type="number" step="0.01" placeholder="请输入价格" class="form-input">
        </div>
        <div class="form-group">
          <label>菜品描述</label>
          <textarea v-model="editForm.foodExplain" placeholder="请输入菜品描述" class="form-input"></textarea>
        </div>
        <div class="dialog-actions">
          <button @click="showEditDialog = false" class="cancel-btn">取消</button>
          <button @click="updateFood" class="confirm-btn">确认更新</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Foods',
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      foods: [],
      loading: false,
      addForm: {
        foodName: '',
        foodPrice: '',
        foodExplain: ''
      },
      editForm: {
        foodId: null,
        foodName: '',
        foodPrice: '',
        foodExplain: ''
      }
    }
  },
  mounted() {
    this.loadFoods()
  },
  methods: {
    async loadFoods() {
      try {
        const businessId = this.$store.state.businessId
        if (!businessId) {
          this.$router.push('/login')
          return
        }

        const response = await this.$axios.post('/elm/BusinessManagementController/getFoodList', null, {
          params: { businessId }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          this.foods = response.data.result || []
        } else {
          console.error('获取菜品列表失败:', response.data?.message)
        }
      } catch (error) {
        console.error('加载菜品失败:', error)
      }
    },

    editFood(food) {
      this.editForm = {
        foodId: food.foodId,
        foodName: food.foodName,
        foodPrice: food.foodPrice,
        foodExplain: food.foodExplain
      }
      this.showEditDialog = true
    },

    async toggleStatus(food) {
      try {
        const response = await this.$axios.post('/elm/BusinessManagementController/toggleFoodStatus', null, {
          params: { foodId: food.foodId }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          // 更新本地数据
          const updatedFood = response.data.result
          food.foodStatus = updatedFood.foodStatus
          alert(`菜品已${food.foodStatus === 1 ? '上架' : '下架'}`)
        } else {
          alert('状态更新失败: ' + (response.data?.message || '未知错误'))
        }
      } catch (error) {
        console.error('更新菜品状态失败:', error)
        alert('状态更新失败')
      }
    },

    async deleteFood(food) {
      if (confirm('确定要删除 ' + food.foodName + ' 吗？')) {
        try {
          const response = await this.$axios.post('/elm/BusinessManagementController/deleteFood', null, {
            params: { foodId: food.foodId }
          })

          if (response.data && (response.data.code === 200 || response.data.code === '200')) {
            this.foods = this.foods.filter(f => f.foodId !== food.foodId)
            alert('删除成功')
          } else {
            alert('删除失败: ' + (response.data?.message || '未知错误'))
          }
        } catch (error) {
          console.error('删除菜品失败:', error)
          alert('删除失败')
        }
      }
    },

    async addFood() {
      if (!this.addForm.foodName || !this.addForm.foodPrice) {
        alert('请填写菜品名称和价格')
        return
      }

      try {
        const businessId = this.$store.state.businessId
        const response = await this.$axios.post('/elm/BusinessManagementController/addFood', null, {
          params: {
            businessId,
            foodName: this.addForm.foodName,
            foodPrice: parseFloat(this.addForm.foodPrice),
            foodExplain: this.addForm.foodExplain
          }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          this.showAddDialog = false
          this.addForm = { foodName: '', foodPrice: '', foodExplain: '' }
          await this.loadFoods()
          alert('添加成功')
        } else {
          alert('添加失败: ' + (response.data?.message || '未知错误'))
        }
      } catch (error) {
        console.error('添加菜品失败:', error)
        alert('添加失败')
      }
    },

    async updateFood() {
      if (!this.editForm.foodName || !this.editForm.foodPrice) {
        alert('请填写菜品名称和价格')
        return
      }

      try {
        const response = await this.$axios.post('/elm/BusinessManagementController/updateFood', null, {
          params: {
            foodId: this.editForm.foodId,
            foodName: this.editForm.foodName,
            foodPrice: parseFloat(this.editForm.foodPrice),
            foodExplain: this.editForm.foodExplain
          }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          this.showEditDialog = false
          await this.loadFoods()
          alert('更新成功')
        } else {
          alert('更新失败: ' + (response.data?.message || '未知错误'))
        }
      } catch (error) {
        console.error('更新菜品失败:', error)
        alert('更新失败')
      }
    }
  }
}
</script>

<style scoped>
.foods-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.foods-table {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f5f5f5;
}

th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #eee;
}

td {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status.active {
  background-color: #d4edda;
  color: #155724;
}

.status.inactive {
  background-color: #f8d7da;
  color: #721c24;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn.edit {
  background-color: #e3f2fd;
  color: #1976d2;
}

.action-btn.edit:hover {
  background-color: #bbdefb;
}

.action-btn.toggle {
  background-color: #fff3e0;
  color: #f57c00;
}

.action-btn.toggle:hover {
  background-color: #ffe0b2;
}

.action-btn.delete {
  background-color: #ffebee;
  color: #c62828;
}

.action-btn.delete:hover {
  background: #ff7875;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2);
}

textarea.form-input {
  min-height: 80px;
  resize: vertical;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-btn, .confirm-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #1890ff;
  color: white;
}

.cancel-btn:hover {
  background: #e6e6e6;
}

.confirm-btn:hover {
  background: #40a9ff;
}
</style>
